<template>
	<view class="pages">
		<!-- #ifdef APP-PLUS -->
		<view class="tab" :style="{top:'0px'}">
			<text :class="{cur:curStatus == item.status}" v-for="(item,index) in statusList" :key="index" @tap="loadData(item)">{{item.name}}</text>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
		<view class="tab" :style="{top:$wanlshop.wanlsys().height + 'px'}">
			<text :class="{cur:curStatus == item.status}" v-for="(item,index) in statusList" :key="index" @tap="loadData(item)">{{item.name}}</text>
		</view>
		<!-- #endif -->
		
		<s-skeleton type="info" :loading="loading3"></s-skeleton>
		<view class="list" v-if="dataList && dataList.length > 0">
			<view class="item" v-for="(item,index) in dataList" :key="item.id" @tap="$wanlshop.auth(`/pages/restaurant/user/order/detail?id=${item.id}`)">
				<view class="head">
					<view class="left">
						<image src="/static/restaurant/common/store.png" mode="widthFix"></image>
						<view class="">
							<text class="text-cut-1">{{item.shop.name}}</text> <br v-if="item.shop.shop_status > 1"/>
							<text class="disabled" v-if="item.shop.shop_status > 1">{{item.shop.shop_status == 2 ? '暂停营业' : item.shop.shop_status == 3 ? '停止营业' : ''}}</text>
						</view>
					</view>
					<text class="status">{{statusText[Number(item.status)]}}</text>
				</view>
				
				<view class="goods">
					<view class="info" v-for="(data,k) in item.ordergoods" :key="data.id">
						<image :src="$wanlshop.oss(data.image)" mode="aspectFill"></image>
						<view class="text">
							<text class="text-cut-1">{{data.title}}</text>
							<view class="">
								<text>x{{data.number}} </text>
								<text>￥{{data.price}}</text>
							</view>
						</view>
					</view>
					<view class="price">
						<text>下单时间：{{$wanlshop.timeToDate(item.createtime)}}</text>
						<view>{{item.asmoney}}</view>
					</view>
					<text class="order_no" @tap.stop="$wanlshop.copy(item.order_no)">订单编号：{{item.order_no}}</text>
					<view class="btns">
						<!-- <text>{{item.is_takeaway == 1 ? '外卖' : '堂食'}}</text> -->
						<view class="cancel" v-if="Number(item.status) < 2" @tap.stop="cancel(item,index)">取消</view>
						<!-- <view class="cancel" v-if="item.status == 2" @tap.stop="refundOrder(item)">申请退款</view> -->
						<view class="" v-if="item.status == 1 && item.shop.shop_status == 1" @tap.stop="pay(item)">去支付</view>
						<view class="" v-if="(item.status == 2 || item.status == 4) && item.is_takeaway == 1" @tap.stop="confirm(item,index)">确认收货</view>
						<view class="" v-if="(item.status == 5 || item.status == 9) && item.shop.shop_status == 1" @tap.stop="addOrder(item)">再来一单</view>
					</view>
				</view>
			</view>
		</view>
		<s-empty v-else></s-empty>
		<uni-load-more v-if="dataList && dataList.length > 0" :status="status" :content-text="contentText" />
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				loading3: true,
				curStatus:0,
				// 1：待支付；2：已支付；5：已完成；9：已取消
				statusText:['全部','待支付','已支付','','配送中','已完成','','','','已取消'],
				statusList: [{
						name: '全部',
						status: 0
					},
					{
						name: '待支付',
						status: 1
					},
					{
						name: '已支付',
						status: 2
					},
					{
						name: '配送中',
						status: 4
					},
					{
						name: '已取消',
						status: 9
					},
					{
						name: '已完成',
						status: 5
					}
				],
				dataList: null,
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				}
			}
		},
		computed: {
			...mapState(['user', 'common'])
		},
		onShow() {
			this.current_page = 1;
			this.reload = true;
			this.loadData()
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData(item) {
				uni.showLoading({
					title:'加载中'
				})
				if(item) {
					this.curStatus = item.status
					this.current_page = 1;
					this.reload = true;
				}
				let res = await this.$api.getOrderLists({
					order_status:this.curStatus,
					page:this.current_page
				});
				uni.stopPullDownRefresh();
				uni.hideLoading()
				if(res.code == 1) {
					this.loading3 = false;
					this.dataList = this.reload ? res.data.data : (this.dataList || []).concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			},
			async cancel(item,index) {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该订单？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.cancelOrder({
								order_id:item.id
							});
							if(res.code == 1) {
								this.$wanlshop.msg('订单取消成功');
								this.dataList[index].status = 9
								if(this.curStatus > 0) {
									this.dataList.splice(index,1)
								}
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			async refundOrder() {
				let res = await this.$api.refundOrder({
					order_id:item.id
				});
				if(res.code == 1) {
					this.$wanlshop.msg('退款申请成功');
					// this.dataList[index].status = 9
				}
			},
			pay(item) {
				this.$wanlshop.to(`/pages/user/money/pay?id=${item.id}&type=canteen`)
			},
			async addOrder(item) {
				let ordergoods = item.ordergoods;
				let data = []
				ordergoods.forEach(item => {
					data.push({
						goods_id:item.goods_id,
						number:item.number,
					})
				})
				let res = await this.$api.getCarStorage({
					cart: data
				});
				if (res.code == 1) {
					this.$wanlshop.to('/pages/restaurant/index/submit')
				}
			},
			async confirm(item,index) {
				uni.showModal({
					title: '提示',
					content: '是否确认确认收货？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.confirmOrder({
								order_no: item.order_no
							});
							if (res.code == 1) {
								this.$wanlshop.msg('确认收货成功');
								this.dataList[index].status = 5
								if(this.curStatus > 0) {
									this.dataList.splice(index,1)
								}
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>
<style lang="less">
	page {
		background-color: #F5F5F5;
		padding-top: 66rpx;
	}
</style>
<style lang="less" scoped>
.tab {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	z-index: 9;
	// top: 0;
	width: 100%;
	background-color: #F5F5F5;
	text {
		color: #333333;
		font-size: 24rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		display: inline-block;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		&.cur {
			color: #FA802A;
			&::after {
				background-color: #FA802A;
			}
		}
		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 100%;
			border: 10rpx;
			height: 2px;
			background-color: transparent;
			bottom: 0;
			left: 0;
		}
	}
}
.list {
	padding: 20rpx 30rpx 0 30rpx;
	.item {
		width: 690rpx;
		// height: 332rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.head {
			padding: 20rpx 10rpx;
			width: calc(100% - 20rpx);
			// height: 92rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E0E0E0;
			margin: 0 10rpx;
			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
				view {
					text {
						width: 490rpx;
						color: #333333;
						font-size: 32rpx;
					}
					.disabled {
						font-size: 22rpx;
						background-color: #999;
						color: #fff;
						border-radius: 6rpx;
						padding: 0 10rpx;
					}
				}
			}
			.status {
				font-size: 28rpx;
				color: #999999;
			}
		}
		.goods {
			padding: 20rpx;
			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 20rpx;
				&:last-child {
					margin-bottom: 0;
				}
				.text {
					flex: 1;
					display: flex;
					flex-direction: column;
					view {
						display: flex;
						justify-content: space-between;
						align-items: center;
						view {
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
					}
					text {
						color: #555555;
						font-size: 28rpx;
						&:nth-child(1) {
							margin-bottom: 10rpx;
						}
					}
				}
				> image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}
			}
			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				text {
					&:nth-child(1) {
						font-size: 26rpx;
					}
				}
				// display: flex;
				// justify-content: flex-end;
				padding: 10rpx 0;
				view {
					text-align: right;
					color: #333;
					font-size: 32rpx;
					padding-left: 30rpx;
					position: relative;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					&::after {
						position: absolute;
						display: inline-block;
						content: "￥";
						font-size: 24rpx;
						left: 0;
					}
				}
			}
			.order_no {
				font-size: 26rpx;
			}
			.btns {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-top: 18rpx;
				// padding-right: 14rpx;
				view {
					width: 152rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #FA802A;
					border-radius: 10rpx;
					color: #fff;
					border: 1px solid #FA802A;
					font-size: 28rpx;
					margin-left: 24rpx;
					&.cancel {
						background-color: #fff;
						color: #FA802A;
					}
				}
			}
		}
	}
}
</style>